<template>
    <div class="container flex-container">
        <n-card title="积分排名">
            <div class="header">
                <n-space :size="30">
                    <n-text>排名</n-text>
                    <n-text>用户</n-text>
                </n-space>
                <span>积分</span>
            </div>
            <div v-for="(user, index) in userList1" :key="user.id" class="item">
                <n-space align="flex-start">
                    <n-text style="margin-right: 1vw; margin-left: 0.5vw;">{{ ++index }}</n-text>
                    <n-space align="flex-start" size="small">
                        <n-avatar :round="true" :size="24"
                                  :style="{color: 'white', backgroundColor: 'orange'}"
                        >{{ user.username.toString().substring(0, 1) }}
                        </n-avatar>
                        {{ user.username }}
                    </n-space>
                </n-space>
                <n-text style="margin-right: 0.4vw">{{ user.credit }}</n-text>
            </div>
            <template v-if="userList1.pages > 1" #action>
                <div style="display:flex; justify-content:center; align-items:center;">
                    <n-pagination v-model:page="userList1.currentPage" :page-count="userList1.page"
                                  @update:page="handleCurrentPageChangeOfCreditRanking"/>
                </div>
            </template>
        </n-card>
        <n-card title="获赞排名">
            <div class="header">
                <n-space :size="30">
                    <n-text>排名</n-text>
                    <n-text>用户</n-text>
                </n-space>
                <span>获赞</span>
            </div>
            <div v-for="(user, index) in userList2" :key="user.id" class="item">
                <n-space align="flex-start">
                    <n-text style="margin-right: 1vw; margin-left: 0.5vw;">{{ ++index }}</n-text>
                    <n-space align="flex-start" size="small">
                        <n-avatar :round="true" :size="24"
                                  :style="{color: 'white', backgroundColor: 'orange'}"
                        >{{ user.username.toString().substring(0, 1) }}
                        </n-avatar>
                        {{ user.username }}
                    </n-space>
                </n-space>
                <n-text style="margin-right: 0.4vw">{{ user.likeCount }}</n-text>
            </div>
            <template v-if="userList2.pages > 1" #action>
                <div style="display:flex; justify-content:center; align-items:center;">
                    <n-pagination v-model:page="userList2.currentPage" :page-count="userList2.page"
                                  @update:page="handleCurrentPageChangeOfLikeCountRanking"/>
                </div>
            </template>
        </n-card>
    </div>
</template>

<style scoped>
.flex-container {
    display: flex;
    gap: 1vw;
}

.header {
    display: flex;
    justify-content: space-between;
}

.item {
    display: flex;
    justify-content: space-between;
    margin: 2vh 0;
}
</style>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { listUsersOrderByCredit, listUsersOrderByLikeCount } from '../api/user'
import { useLoadingBar } from 'naive-ui'

const loadingBar = useLoadingBar()

const creditPagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
    pages: 1,
})
const likeCountPagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
    pages: 1,
})
const userList1 = ref([])
const userList2 = ref([])
const handleCurrentPageChangeOfCreditRanking = (current) => {
    creditPagination.currentPage = current
    fetchCreditRanking()
}
const fetchCreditRanking = () => {
    loadingBar.start()
    listUsersOrderByCredit(creditPagination.currentPage, creditPagination.pageSize, 'credit').then(res => {
        userList1.value = res.data.records
        creditPagination.currentPage = res.data.current
        creditPagination.pageSize = res.data.size
        creditPagination.total = res.data.total
        creditPagination.pages = res.data.pages
        loadingBar.finish()
    })
}
const handleCurrentPageChangeOfLikeCountRanking = (current) => {
    creditPagination.currentPage = current
    fetchLikeCountRanking()
}
const fetchLikeCountRanking = () => {
    loadingBar.start()
    listUsersOrderByLikeCount(likeCountPagination.currentPage, likeCountPagination.pageSize).then(res => {
        userList2.value = res.data.records
        likeCountPagination.currentPage = res.data.current
        likeCountPagination.pageSize = res.data.size
        likeCountPagination.total = res.data.total
        likeCountPagination.pages = res.data.pages
        loadingBar.finish()
    })
}
onMounted(() => {
        fetchCreditRanking()
        fetchLikeCountRanking()
    },
)
</script>
